<template>
  <uni-popup ref="popup" type="center" :is-mask-click="isMaskClick" @maskClick="handleMaskClick">
    <view class="popup">
      <view class="popup-center">
        <image
          class="popup-img"
          :src="`/static/images/online-examination/tip-dialog-${isPrimary ? 'success' : 'fail'}.png`"
        />
        <slot>
          <view>恭喜您</view>
          <view>题目已全部答完，确认交卷吗</view>
        </slot>
      </view>
      <view class="popup-footer">
        <view v-if="!timeout" :class="[{ 'popup-footer-1': isPrimary }, { 'popup-footer-3': !isPrimary }]" @click="handleCancel"
          >取消</view
        >
        <view :class="[
          { 'popup-footer-2': isPrimary },
          { 'popup-footer-4': !isPrimary },
          { 'timeout': timeout },
          ]" @click="handleConfirm"
          >确认</view
        >
      </view>
    </view>
  </uni-popup>
</template>
<script>
export default {
  props: {
    // 点击蒙层是否关闭
    isMaskClick: {
      type: Boolean,
      default: false
    },
    timeout: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  data() {
    return {}
  },
  model: {
    prop: 'modelValue',
    event: 'update:modelValue'
  },
  created() {},
  emits: ['cancel', 'confirm', 'update:modelValue'],
  watch: {
    modelValue(newValue, oldValue) {
      if (newValue === oldValue) return
      if (newValue) return this.open()
      this.close()
    }
  },
  computed: {
    isPrimary() {
      return this.type === 'primary'
    }
  },
  methods: {
    open() {
      this.$refs.popup.open('center')
    },
    close() {
      this.$refs.popup.close()
    },
    //取消
    handleCancel() {
      this.$emit('cancel')
      this.$emit('update:modelValue', false)
      this.close()
    },
    // 确认
    handleConfirm() {
      this.$emit('confirm')
      this.$emit('update:modelValue', false)
      this.close()
    },
    handleMaskClick() {
      this.handleCancel()
    }
  }
}
</script>
<style scoped lang="scss">
.popup {
  background: #fff;
  width: 650rpx;
  position: relative;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  font-family: PingFang SC-Regular, PingFang SC;
}

.popup-center {
  padding-top: 158rpx;
  text-align: center;
  font-size: 36rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  padding-bottom: 180rpx;
}
.popup-img {
  width: 182rpx;
  height: 182rpx;
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  top: -54rpx;
}
.popup-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 34rpx;
  padding: 0 50rpx;
  color: #454a5e;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 40rpx;
  .popup-footer-1,
  .popup-footer-2,
  .popup-footer-3,
  .popup-footer-4 {
    width: 246rpx;
    height: 88rpx;
    text-align: center;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    line-height: 88rpx;
  }
  .timeout {
    flex: 1;
  }

  .popup-footer-1 {
    border: 1rpx solid #454a5e;
    width: 244rpx;
    height: 86rpx;
    line-height: 86rpx;
  }
  .popup-footer-2 {
    background: #88b4c4;
    color: #ffffff;
  }

  .popup-footer-3 {
    background: #c87c32;
    color: #ffffff;
  }
  .popup-footer-4 {
    border: 1rpx solid #454a5e;
    width: 244rpx;
    height: 86rpx;
    line-height: 86rpx;
  }
}
</style>
